<script setup>
import SMS_ACCOUNT from "@/views/v-msg-service/sms-manage/sms-account/index.vue"
import SMS_SIGNATURE from "@/views/v-msg-service/sms-manage/sms-signature/index.vue"
import SMS_TEMPLATE from "@/views/v-msg-service/sms-manage/sms-template/index.vue"
import SMS_SEND_LOG from "@/views/v-msg-service/sms-manage/sms-send-log/index.vue"


const activeName = ref("SMS_ACCOUNT")
/**
 * 创建浅响应式对象、不会对组件对象深度观察、避免不必要的性能开销、移除控制台警告
 */
const activeComponent = shallowRef(SMS_ACCOUNT)

const tabs = ref([
  { label: "短信账户", name: "SMS_ACCOUNT", component: shallowRef(SMS_ACCOUNT) },
  { label: "短信签名", name: "SMS_SIGNATURE", component: shallowRef(SMS_SIGNATURE) },
  { label: "短信模板", name: "SMS_TEMPLATE", component: shallowRef(SMS_TEMPLATE) },
  { label: "发送记录", name: "SMS_SEND_LOG", component: shallowRef(SMS_SEND_LOG) },
])

const tabMap = {
  "SMS_ACCOUNT" : () => {},
  "SMS_SIGNATURE" : () => {},
  "SMS_TEMPLATE" : () => {},
  "SMS_SEND_LOG" : () => {},
}

const tabChange = (val) => {
  activeName.value = val.paneName
  tabs.value.forEach(ele => {
    if (ele.name === val.paneName) activeComponent.value = ele.component
  })
}

</script>

<template>
  <div class="sms-manage-box">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabChange">
      <el-tab-pane v-for="item in tabs" :label="item.label" :name="item.name" />
      <component :is="activeComponent" />
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.sms-manage-box {
  height: 100%;
  width: 100%;
  :deep(.el-tabs) {
    .el-tabs__header {
      margin: 10px 0 0;
      padding: 0 20px;
      .el-tabs__nav-wrap::after {
        content: unset;
      }
      .el-tabs__active-bar {
        height: 0;
      }
    }
    .el-tabs__content {
      overflow: unset;
    }
  }
}
</style>
